<template>
  <div class="demo-category">
    <div class="flex justify-center">
      <button
        v-for="item in categoryConf"
        :key="item.icon"
        :class="
          classNames(
            'category-btn  flex items-center',
            activeBtn === item.title ? 'active-category' : ''
          )
        "
        @click="activeBtn = item.title"
      >
        <Icon :name="item.icon" class="mr-3" />
        <span>{{ item.title }}</span>
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import classNames from "classnames";

const activeBtn = ref("webApp");
const categoryConf: Array<{
  title: string;
  icon: IconName;
}> = [
  {
    title: "webApp",
    icon: "webapp",
  },
  {
    title: "电脑版",
    icon: "pc",
  },
  {
    title: "手机版",
    icon: "mobile",
  },
];
</script>

<style lang="scss" scoped>
.demo-category {
  padding: 0 32px;
  margin-top: 16px;
  margin-bottom: 28px;
  .category-btn {
    height: 34px;
    padding: 0 12px;
    margin-right: 8px;
    border-radius: 17px;
    border-width: 1px;
    border-color: transparent;
    border-style: solid;
    &:hover {
      border-color: #4a4a4a;
    }
    &.active-category {
      border-color: #fff;
    }
  }
}
</style>
